<template>
  <div class="category" :style="{ width: width + 'px', height: height + 'px' }">
    <h3>{{title}}类目</h3>
<!--    <ul>-->
<!--      <li v-for="(item, index) in listData" :key="index">{{item}}</li>-->
<!--    </ul>-->
    <slot v-bind:games="games">
      <ul>
        <li v-for="(g, index) in games" :key="index">{{g}}</li>
      </ul>
    </slot>
  </div>
</template>

<script>
export default {
  name: "CategoryComponent",
  data() {
    return {
      games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
    }
  },
  props: {
    title: {
      type: String,
      default: "默认"
    },
    height: {
      type: Number,
      default: 500
    },
    width: {
      type: Number,
      default: 300
    }
  },
}
</script>

<style>
  .category {
    background-color: skyblue;
  }
  h3 {
    background-color: gold;
    text-align: center;
  }
</style>